<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" labelWidth="100" :collapse="true" @filterChange="changeHandle"></TopFilter>
    <!-- 创建一个查询table -->
    <FilterTable
      ref="tables"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :columns="columns"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="columns => (this.selectColumn = columns)"
      :onSyncTableData="queryModelList"
      columnsRef="cmcUnitPriceDefineMainPage"
      selectionType="single"
      :isExportExcel="true"
      exportFileName="工时单价导出.xlsx"
    >
      <template slot="moreActions">
        <span @click="removeRecordHandle">删除数据</span>
      </template>
      <template slot="controls" slot-scope="props">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addFun()">新建</el-button>
      </template>
    </FilterTable>
    <!-- 增加新增页面 -->
    <BaseDialog :visible.sync="addWorkHourPricePane" title="新建工时单价" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <addWorkHourPricePane :excloudSeries="this.excloudSeries" @close="closeAddHandler" />
    </BaseDialog>

    <BaseDialog :visible.sync="editWorkHourPricePane" title="编辑工时单价" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <editWorkHourPricePane :selectColumn="this.selectColumn" :excloudSeries="this.excloudSeries" @close="closeEditHandler" />
    </BaseDialog>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import addWorkHourPricePane from './addWorkHourPricePane';
import editWorkHourPricePane from './editWorkHourPricePane';
import { getWorkHourPrice, deleteWorkHourPrice, getPriceSeriesCode } from '@/api/repair/repair/workHourPrice';
import { getChexSelectTable } from '@/api/repair/repairReception/customer/brand.js'; // 车系
import { confirmAction, notifyAction } from '@/utils';

export default {
  components: {
    addWorkHourPricePane,
    editWorkHourPricePane
  },
  mixins: [dictionary],
  data() {
    return {
      addWorkHourPricePane: false,
      editWorkHourPricePane: false,
      topFilterList: this.createTopFilterList(),
      fetchApi: getWorkHourPrice,
      fetchParams: { xhrAbort: false },
      columns: this.createColumns(),
      selectColumn: [],
      excloudSeries: []
    };
  },
  mounted() {
    console.log('页面被加载');
    this.initSeriesId();
    this.excloudSeriesCode();
  },
  methods: {
    async excloudSeriesCode() {
      let res = await getPriceSeriesCode();
      console.log(res.data);
      this.excloudSeries = res.data || [];
    },
    // 关闭页面触发事件
    closeAddHandler(type) {
      console.log('新增保存' + type);
      this.addWorkHourPricePane = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    closeEditHandler(type) {
      console.log('编辑保存' + type);
      this.editWorkHourPricePane = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    // 点击新增按钮触发方法
    addFun() {
      this.addWorkHourPricePane = true;
    },
    // 创建查询条件
    createTopFilterList() {
      return [
        /* {
          type: 'INPUT',
          label: '工时单价代码',
          fieldName: 'workHourPriceCode',
          placeholder: '请输入'
        },
        {
          type: 'INPUT',
          label: '工时单价名称',
          fieldName: 'workHourPriceName',
          placeholder: '附加项目名称...'
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'seriesCode',
          placeholder: '请选择',
          itemList: []
        }*/
        {
          type: 'INPUT',
          label: '工时单价代码',
          fieldName: 'priceCode',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '工时单价名称',
          fieldName: 'priceName',
          placeholder: '请输入...'
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'seriesCode',
          placeholder: '请选择...',
          itemList: []
        }
      ];
    },
    createColumns() {
      return [
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 80,
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" disabled={props.row.DATA_SOURCES === 10451001 ? false : true} type="text" onClick={() => this.editHandle(props.row)}>
                  编辑
                </el-button>
              </div>
            );
          }
        },
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '工时单价代码',
          dataIndex: 'LABOUR_PRICE_CODE',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '工时单价',
          dataIndex: 'LABOUR_PRICE',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '工时单价名称',
          dataIndex: 'LABOUR_PRICE_NAME',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '车系',
          dataIndex: 'series_code',
          sorter: true,
          filter: true,
          editable: false,
          editType: 'select',
          filterType: 'input',
          editItems: [],
          dictItems: []
        },
        {
          title: '是否在维修项目中启用',
          dataIndex: 'IS_ITEM_USE',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: props => {
            let oemValue = props.row.IS_ITEM_USE && props.row.IS_ITEM_USE == 10041001 ? '启用' : '未启用';
            return oemValue;
          }
        },
        {
          title: '数据来源',
          dataIndex: 'DATA_SOURCES',
          sorter: true,
          filter: true,
          editable: false,
          editType: 'select',
          filterType: 'checkbox',
          editItems: this.createDictList('1045'),
          filterItems: this.createDictList('1045')
        },
        //   {
        //     title: '数据来源1',
        //     dataIndex: 'OEM_TAG',
        //     sorter: true,
        //     filter: true,
        //     filterType: 'input',
        //     // render: props => {
        //     //   let oemValue = props.row.OEM_TAG === 10041001 ? '是' : '否';
        //     //   return oemValue;
        //     // },
        //     filterItems: this.createDictList('1045'),
        //     dictItems: this.createDictList('1045'),
        //     render: props => {
        //       return <span>{
        //         this.createDictText(props.row.DATA_SOURCES, '1045')}</span>;
        //     },

        //     itemList: this.createDictList('1045')
        //  },

        // {
        //   title: '状态',
        //   dataIndex: 'STATUS',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'input',
        //   render: props => {
        //     let oemValue = props.row.STATUS === 10041001 ? '启用' : '停用';
        //     return oemValue;
        //   },
        //   dictItems:[{text:'启用',value:10041001},{text:'禁用',value:10041002}],
        //   // render: props => {
        //   //   return <span>{this.createDictText(props.row.DATA_SOURCES, '1003')}</span>;
        //   // }
        //   // itemList: this.createDictList('1003')
        // },
        {
          title: '停用日期',
          dataIndex: 'DISABLE_DATE',
          sorter: true,
          filter: true,
          filterType: 'date-range'
          // render: props => {
          //   let oemValue = props.row.OEM_TAG === 10041001 ? '是' : '否';
          //   return oemValue;
          // },
          // itemList: this.createDictList('1045')
        },
        {
          title: '备注',
          dataIndex: 'REMARK',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        }
      ];
    },
    // 系统初始化车系
    async initSeriesId() {
      // let queryParams = { WXXMDYS: 'WXXMDYS' };
      let res = await getChexSelectTable();
      console.log('进入车系初始化', res);
      this.topFilterList.find(x => x.fieldName === 'seriesCode').itemList = res.data.map(x => ({ value: x.seriesCode + '', text: x.seriesName }));
      this.columns.find(x => x.dataIndex === 'series_code').dictItems = res.data.map(x => ({ value: x.seriesCode + '', text: x.seriesName }));
      this.columns.find(x => x.dataIndex === 'series_code').editItems = res.data.map(x => ({ value: x.seriesCode + '', text: x.seriesName }));
    },

    // 查询车系
    async queryModelList(val) {
      /* const projectModelList = (await findProjectModelList()).data.map(x => ({ text: x.MODEL_LABOUR_NAME, value: x.MODEL_LABOUR_CODE, index: x.index }));
      val.forEach(x => {
        projectModelList.map(y => {
          if (y.value == x.series_code) {
            x.series_code = y.text;
          }
        });
      });*/
    },
    // 查询条件触发方法
    changeHandle(val) {
      // this.fetchParams = Object.assign({}, val, { offset: 0, xhrAbort: false });
      console.log(this.columns.find(x => x.dataIndex === 'series_code').dictItems);
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
      this.selectColumn = [];
      if (!this.excloudSeries.length) {
        this.excloudSeriesCode();
      }
    },
    editHandle(row) {
      this.selectColumn = row;
      this.editWorkHourPricePane = true;
    },
    async removeRecordHandle() {
      try {
        await confirmAction('此操作将删除该记录, 是否继续?');
        // 获取工时单价代码
        console.log(this.selectColumn);
        let workHourCode = this.selectColumn[0].LABOUR_PRICE_CODE;
        let res = await deleteWorkHourPrice(this.selectColumn[0], workHourCode);
        if (res.resultCode === 200) {
          notifyAction('删除数据成功！');
          // 执行刷新
          this.refreshHandle();
        } else {
          this.$notify.error({ title: '提示信息', message: res.errMsg || '删除工时单价报错!' });
        }
      } catch (e) {}
    },
    refreshHandle() {
      this.fetchParams = { ...this.fetchParams };
    }
  }
};
</script>

<style></style>
